<!DOCTYPE html>
<html>
<head>
    <title>Relativity Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="relativityCanvas" width="600" height="350"></canvas>
    <script>
        const canvas = document.getElementById('relativityCanvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        
        // Helper function to draw an arrow
        function drawArrow(fromX, fromY, toX, toY) {
            const headlen = 10;
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
            ctx.closePath();
            ctx.fill();
        }
        
        // --- Main Drawing ---

        // Define coordinates
        const oX = 80;
        const oY = 250;
        const opX = 180;
        const p2X = 380;
        const axisEndX = 550;
        const axisTopY = 50;

        // Draw S frame axes and labels
        ctx.beginPath();
        drawArrow(oX, oY, axisEndX, oY); // x-axis base
        drawArrow(oX, oY, oX, axisTopY);    // y-axis

        ctx.font = '22px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('S系', oX + 40, oY - 150);
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.fillText('O', oX - 20, oY + 20);
        ctx.fillText('y', oX - 25, axisTopY + 15);
        ctx.fillText('x', axisEndX - 50, oY + 25);
        
        // Draw S' frame axis and labels
        drawArrow(opX, oY, opX, axisTopY); // y'-axis
        // The x'-axis shares the line with x-axis, just add the label

        ctx.font = '22px "Times New Roman"';
        ctx.fillText("S'系", opX + 40, oY - 150);
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.fillText("O'", opX - 20, oY + 20);
        ctx.fillText("y'", opX + 25, axisTopY + 15);
        ctx.fillText("x'", axisEndX, oY + 25);
        
        // Draw points P1 and P2
        const pointRadius = 4;
        ctx.beginPath();
        ctx.arc(opX, oY, pointRadius, 0, 2 * Math.PI); // P1 at O'
        ctx.fill();

        ctx.beginPath();
        ctx.arc(p2X, oY, pointRadius, 0, 2 * Math.PI); // P2
        ctx.fill();

        // Point labels (P1, P2) with subscripts
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.fillText('P', opX + 30, oY - 25);
        ctx.font = 'italic 16px "Times New Roman"';
        ctx.fillText('1', opX + 40, oY - 22);
        
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.fillText('P', p2X, oY - 25);
        ctx.font = 'italic 16px "Times New Roman"';
        ctx.fillText('2', p2X + 10, oY - 22);

        // Position label for P2: x'_{20} = L_0
        const labelX = opX + (p2X - opX) / 2 + 30;
        const labelY = oY + 30;
        ctx.font = 'italic 20px "Times New Roman"';
        ctx.fillText("x'", labelX, labelY);
        ctx.font = 'italic 14px "Times New Roman"';
        ctx.fillText("20", labelX + 12, labelY + 5);
        ctx.font = '20px "Times New Roman"';
        ctx.fillText("= L", labelX + 45, labelY);
        ctx.font = 'italic 14px "Times New Roman"';
        ctx.fillText("0", labelX + 59, labelY + 5);
        
        // Draw velocity vector v
        const vArrowY = 180;
        const vArrowStartX = 450;
        const vArrowEndX = 510;
        ctx.lineWidth = 2;
        drawArrow(vArrowStartX, vArrowY, vArrowEndX, vArrowY);
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.fillText('v', (vArrowStartX + vArrowEndX) / 2, vArrowY - 25);

    </script>
</body>
</html>